<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-09-22 10:46:44
 * @LastEditTime: 2022-12-19 16:34:23
-->
<template>
  <div class="detail-list">
    <template>
      <div class="detail-content">
        <div v-for="(item,index) in zeroInfo.buildingZeroScores" :key="index"
          class="single-date">
          <!--后台角色-->
          <p class="build-tips"
            v-if="zeroInfo.totalZeroScore!=0 && zeroInfo.checkIndex==3 && index==1">
            在其他{{paramsMsg.orgId!=0 && isbuildFlag == 'nobuildpage'?'组织':'案场'}}还有{{zeroInfo.totalZeroScore}}次0分记录</p>
          <div v-if="paramsMsg.orgId!=0 && isbuildFlag == 'nobuildpage'">
            <p class="build-name"
              v-if="zeroInfo.checkIndex==3 && item.orgId!=paramsMsg.orgId">
              {{item.buildingName}}（{{item.buildingZeroScoreSum}}次0分记录）
            </p>
          </div>
          <div v-else>
            <p class="build-name"
              v-if="zeroInfo.checkIndex==3 && item.buildingId!=paramsMsg.buildingId">
              {{item.buildingName}}（{{item.buildingZeroScoreSum}}次0分记录）
            </p>
          </div>
          <div class="zero-list" v-for="(itemZero,indexZero) in item.zeroScoreList"
            :key="index+'-'+indexZero">
            <div class="flex flex-horizontal-between">
              <p class="zero-date">0分日期：<span>{{itemZero.zeroDate}}</span></p>
              <p style="color:#2d8cf0;cursor: pointer;"
                @click="showDetailFun(index,item,itemZero,indexZero)">
                {{showIndexList.indexOf(index+'-'+indexZero)>-1?'收起明细':'展开明细'}}
                <Icon :type="showIndexList.indexOf(index+'-'+indexZero)>-1?'ios-arrow-up':'ios-arrow-down'"
                  color="#2d8cf0" />
              </p>
            </div>
            <!--明细-->
            <div v-show="showIndexList.indexOf(index+'-'+indexZero)>-1"
              v-for="(itemDetail,indexDetail) in itemZero.detailList" :key="indexDetail">
              <p class="date-text flex"><span>{{itemDetail.date}}</span></p>
              <ul class="flex flex-horizontal-between score-list" v-if="itemDetail.statistics">
                <li v-for="(headerItem,headerIndex) in headerArr" :key="headerIndex"
                  :style="{color:headerIndex>0?itemDetail.statistics[headerItem.key]<0?'#70B603':itemDetail.statistics[headerItem.key]>0?'#F59A23':'#666666':'#333333'}">
                  {{headerItem.name}}：<span>{{headerIndex==2&&itemDetail.statistics[headerItem.key]>0?'+':''}}</span>{{itemDetail.statistics[headerItem.key]}}
                </li>
              </ul>
              <!--提示信息-->
              <div v-if="itemDetail.dynamic">
                <p class="zero-text" v-if="itemDetail.dynamic.dynamicType==2">
                  <Icon type="md-alert" :size="16" color="#FAAD14"
                    style="line-height:26px;margin-right:10px;" />
                  {{itemDetail.dynamic.dynamicContent}}</p>
                <p v-else class="empty-text">{{itemDetail.dynamic.dynamicContent}}</p>
              </div>
              <ul v-for="(itemDetailChild,indexDetailChild) in itemDetail.scoreDetails"
                :key="indexDetailChild" class="flex">
                <li style="width:100%;position: relative">
                  <div class="flex flex-horizontal-between">
                    <p class="remarks-text">{{itemDetailChild.remarks}}</p>
                    <div class="flex">
                      <Button v-if="detailTypeList.indexOf(itemDetailChild.scoreType)>-1"
                        type="primary" @click="showCusDetail(itemDetailChild)" class="cus-btn"
                        size="small" style="margin-right:8px;">明细</Button>
                      <p :class="[{'green':itemDetailChild.score<0},'score-num']">
                        {{itemDetailChild.score}}<span>{{itemDetailChild.scoreStatus == 2?'':'分'}}</span>
                      </p>
                    </div>
                  </div>
                  <p v-if="itemDetailChild.annotationNotes!='' && itemDetailChild.annotationNotes!=null "
                    class="cus-total" v-html="itemDetailChild.annotationNotes.replace(/\n/g,'<br>')"></p>
                  <div v-else class="cus-total">
                    <p>{{itemDetailChild.customerName}}<span>
                        {{itemDetailChild.customerPhone}}</span>
                    </p>
                    <p>{{itemDetailChild.room}}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!--任务明细-->
    <dt-modal-info ref="info" :title="detailTitle">
      <p style="margin-bottom:10px">
        {{detailChecked.actionDate}}，{{detailChecked.annotationNotes}}</p>
      <dt-grid ref="detailTable" :columns="columnDetail" :onFetch='onFetchDetail'
        :height="400" />
    </dt-modal-info>
  </div>
</template>
<script>
  import scoreMgr from '@/biz/score/index'
  import columnDelConfig from './columnDetail'
  export default {
    components: {},
    data() {
      return {
        zeroInfo: {},
        paramsMsg: {},
        showIndexList: [],
        headerArr: [
        {
          name: '积分',
          key: 'curScore',
          unit: '分'
        }, {
          name: '扣分',
          key: 'yesterdayDeduction',
          unit: '分'
        }, {
          name: '加分',
          key: 'yesterdayAddPoints',
          unit: '分'
        }],
        list: [],
        scoreTotal: 0,
        detailTitle: '',
        columnDetail: [],
        detailChecked: {},
        detailTypeList: [18, 14, 26, 31, 32, 33],
        isbuildFlag: 'buildpage'
      }
    },
    computed: {},
    created() {
      // 初始化
    },
    mounted() {},
    watch: {},
    methods: {
      initData(zeroInfo, paramsMsg) {
        this.isbuildFlag = this.$tool.getStorage('isbuildFlag')
        this.paramsMsg = paramsMsg
        this.zeroInfo = zeroInfo
        this.showIndexList = []
        if(zeroInfo.checkIndex == 2){
          for(let i=0;i<zeroInfo.buildingZeroScores.length;i++){
            for(let j=0; j<zeroInfo.buildingZeroScores[i].zeroScoreList.length;j++){
              this.showDetailFun(i,zeroInfo.buildingZeroScores[i],zeroInfo.buildingZeroScores[i].zeroScoreList[j],j)
            }
          }  
        }
      },
      showDetailFun(index, item, itemZero, indexZero) {
        if (this.showIndexList.indexOf(index+'-'+indexZero)>-1) {
          itemZero.detailList = []
          this.showIndexList.splice(this.showIndexList.indexOf(index+'-'+indexZero),1)
        } else {
          scoreMgr
            .getScoreList({
              buildingId:this.paramsMsg.orgId!=0?'0':item.buildingId,
              pageNum: 1,
              orgId:this.paramsMsg.orgId!=0?item.orgId:'0',
              pageSize: 99999,
              startDate: itemZero.cycleStartTime,
              endDate: itemZero.cycleEndTime,
              userId: this.paramsMsg.userId,
              roleId: this.paramsMsg.roleId
            })
            .then((res) => {
              res.forEach((item) => {
                item.scoreDetails.forEach(childItem => {
                  childItem.canCheck = childItem.isAllowRemoveScore
                  childItem.isSelected = false
                  childItem.score = childItem.scoreStatus == 2 ? '申诉成功' : childItem
                    .score > 0 ? '+' +
                    childItem
                    .score : childItem.score

                  try {
                    let obj = JSON.parse(childItem.detail.remarks)
                    childItem.detail = Object.assign(childItem.detail, obj)
                  } catch (error) {}
                  Object.assign(childItem, childItem.detail)
                })
              })
              itemZero.detailList = res
              this.showIndexList.push(index + '-' + indexZero)
            })
            .catch((err) => {
              itemZero.detailList = []
              this.showIndexList = []
            })
        }
      },
      showCusDetail(item) {
        this.detailChecked = { ...item }
        this.$refs.info.show()

        let detailObj = columnDelConfig.columnDetail(this).titleList.filter(ele => ele
          .scoreType == item
          .scoreType)[0]


        this.columnDetail = columnDelConfig.columnDetail(this)[detailObj.columns]
        this.detailTitle = this.detailChecked.dedDetail != '' ? JSON.parse(this.detailChecked
          .dedDetail).title : ''

        this.$nextTick(function() {
          this.$refs.detailTable.init(this)
          this.$refs.detailTable.fetch()
        })
      },
      // 查看明细
      onFetchDetail() {
        return new Promise((resovle, reject) => {
          resovle()
        }).then(res => {
          return this.detailChecked.dedDetail != '' ? JSON.parse(this.detailChecked
            .dedDetail).data : []
        })
      }
    },
  }
</script>
<style lang="scss" scoped>
  .integral-detail {
    .detail-list {
      margin: 20px 0;
      padding: 15px;
      border: 1px solid #eee;

      .header {
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }

      .list-check {
        width: 30px;
      }

      .remarks-text {
        font-size: 14px;
        line-height: 28px;
      }

      .zero-text {
        margin: 10px 0;
        line-height: 40px;
        color: #a30014;
        background-color: rgba(254, 252, 236, 1);
      }

      .detail-content {
        padding-right: 10px;
        max-height: 450px;
        overflow-y: auto;

        .build-tips {
          font-size: 18px;
          line-height: 40px;
        }

        .zero-list {
          margin-bottom: 20px;
          padding: 10px;
          border: 1px solid #dadada;

          .zero-date {
            padding-left: 15px;
            border-left: 8px solid #F59A23;
          }
        }

        .score-list {
          background-color: #F6F8FA;
          padding: 8px 40px;
          border: 1px solid #dadada;
          border-radius: 5px;
          font-size: 16px;
        }

        ul {
          padding: 15px 0 30px 0;
        }

        .cus-total {
          position: absolute;
          font-size: 12px;
          color: #999;
          width: 500px;
          text-align: left;
        }

        .score-num {
          color: #F59A23;
          border: 1px solid #F59A23;
          text-align: center;
          min-width: 50px;
          border-radius: 5px;
          line-height: 28px;
        }

        .ivu-btn-small {
          height: auto;
        }

        .green {
          color: #70B603;
          border: 1px solid #70B603;
        }

        .single-date {
          margin-bottom: 10px;

          .date-text {
            margin-bottom: 10px;

            span {
              padding: 0 10px;
              width: 255px;
              font-size: 20px;
            }
          }

          .build-name {
            font-size: 16px;
            margin-left: 20px;
            line-height: 40px;
          }
        }

        .date-text::before {
          content: '';
          display: table-cell;
          position: relative;
          top: 50%;
          width: 800px;
          border-top: 1px solid #e8eaec;
          transform: translateY(50%);
        }

        .date-text::after {
          content: '';
          display: table-cell;
          position: relative;
          top: 50%;
          width: 100%;
          border-top: 1px solid #e8eaec;
          transform: translateY(50%);
        }
      }
    }
  }

  .empty-text {
    padding-left: 20px;
    margin: 10px 0;
    line-height: 40px;
    background-color: rgba(254, 252, 236, 1);
  }
</style>
